<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>详情</title>
    <link th:href="@{/showstatic/css/details.css}" type="text/css" rel="stylesheet"/>
    <link th:href="@{/showstatic/js/layer-v3.0.3/layer/mobile/need/layer.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/showstatic/layui/css/layui.css}" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" th:src="@{/showstatic/js/jquery-1.7.2.min.js}"></script>
    <script type="text/javascript" th:src="@{/showstatic/js/phone.js}"></script>
    <script type="text/javascript" th:src="@{/showstatic/js/layer-v3.0.3/layer/layer.js}"></script>
    <script type="text/javascript" th:src="@{/showstatic/layui/layui.js}"></script>
</head>

<body>
<div class="whole">
    <div class="movie">
        <div class="back"><img src="/showstatic/image/back.png"/></div>
        <img style="height: 600px" th:src="${movie.img}"/>
        <span>
        	<img src="/showstatic/image/start.png"/>
        </span>
    </div>
    <div class="detail">
        <div class="bol"><img src="/showstatic/image/bg-bg.png"/></div>
        <div class="det-con">
            <div class="common det-c">
                <div class="jz-pic">
                    <img th:src="${movie.img}"/>
                </div>
                <div class="det-inf">
                    <p class="det-titles">
                        <span>[[${movie.movename}]]</span>
                        <span class="eng">[[${movie.director}]]</span>
                    </p>
                    <div id="test9"></div>
                    <p class="det-tag">[[${movie.mainactor}]]</p>

                </div>
            </div>

            <div class="common parti">
                <span>[[${movie.description}]]</span>
            </div>

            <div class="common stage-photo">
                <h3>剧照和视频</h3>
                <ul>
                    <li><img th:src="${movie.img}"/></li>
                </ul>
            </div>

            <div class="common parti">
                <span>影院地址</span>
                <h2><a th:href="@{|/movieshow/ditu.html?longitude=${longitude}&latitude=${latitude}|}">[[${cinemaInfo.address}]] </a></h2>
            </div>

        </div>
        <!--评论部分内容展示-->
        <div class="commentpart" style="margin-left: 120px;">
            <div th:each="sigcomment,var:${moviesComments}">
                <ul>
                    <li class="">
                        <div class="">
                            <div class="user">
                                <span class="name" style="font-size:15px;color: blue;">用户&nbsp;&nbsp;[[${sigcomment.usersInfo.telnumber}]]</span>
                                <span style="margin-left: 50px;">
											<a  th:attr="id=btn+${var.index}" style="color: blue;cursor:pointer"
                                               th:onclick="changestatus([[${var.index}]])"><<<收起回复</a>&nbsp;&nbsp;&nbsp;
											<a  th:attr="id=newbtn+${var.index}" style="color: blue;cursor:pointer"
                                               th:onclick="begin([[${var.index}]])">回复</a>
                                </span>
                            </div>
                            <div class="time">
                                <div style="float: left;"
                                     th:text="${#dates.format(sigcomment.commentdate,'yyy/MM/dd hh:mm:ss')}"></div>
                                <ul class="" style="float:left;margin-left: 10px;">
                                    <li>
                                        <i class="layui-icon layui-icon-rate-solid" style="color:#ff7f27;"
                                           th:each="i:${#numbers.sequence(1,sigcomment.commentstar)}"></i>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <br>
                        <div style="margin-left:0px;">评论说：&nbsp;&nbsp;[[${sigcomment.commenttext}]]</div>
                        <!--开始循坏查询回复-->
                        <div th:attr="id=reply+${var.index}" style="margin-left:0px;">
                            <div th:each="sigreply:${sigcomment.cinemaCommentReplies}">
                                <span name="replyname" style="color: blue;" th:if="${sigreply.usersInfo!=null}">[[${sigreply.usersInfo.telnumber}]]</span>
                                <span name="replycinema" style="color: blue;" th:if="${sigreply.usersInfo==null}">[[${sigreply.cinemname}]]</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <span name="replytime">于[[${#dates.format(sigreply.replydate,'yyy/MM/dd hh:mm:ss')}]]</span>
                                <span>&nbsp;&nbsp;回复：</span>
                                <span name="replytext">
                                [[${sigreply.replytext}]]
                            </span>
                            </div>
                        </div>
                        <!--回复框-->
                        <div th:attr="id=newrepy+${var.index}" style="margin-left:0px;width:50%;display: none">
                            <form class="layui-form" action="/comment/replyComment">
                                <input type="hidden" name="movieId" th:value=${movie.id}>
                                <input type="hidden" name="commentId" th:value="${sigcomment.id}">
                                <div class="layui-form-item layui-form-text">
                                    <textarea name="replytext" th:attr="id=newreply+${var.index}" required
                                              lay-verify="required" placeholder="请输入回复内容" class="layui-textarea"
                                              th:rowspan="3" th:colspan="50" th:width="500px"></textarea>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn" lay-submit lay-filter="formreply">提交回复</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </form>
                        </div>
                    </li>
                </ul>
                <hr style="height:1px;border:none;border-top:1px dashed #0066CC;margin-right: 100px;"/>
            </div>
        </div>
    </div>
    <div style="margin-top: 50px;">
        <a class="footer" th:href="@{|/schedule/findSchedule?id=${movie.id}|}">立即订票</a>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">


    $(document).ready(function () {
        layui.use(['rate'], function() {
            var rate = layui.rate;
            //只读
            rate.render({
                elem: '#test9'
                ,value: [[${star}]]
                ,readonly: true
                ,half:true
            });
        })

        $('.movie').click(function () {
            movie();
        });

        /*预告片播放函数*/
        function movie() {
            layer.open({
                type: 2,
                title: false,
                area: ['630px', '360px'],
                shade: 0.8,
                closeBtn: 0,
                shadeClose: true,
                content: [[${movie.vediosrc}]]
            });
        }

        $('.back').on('click', function () {
            window.history.go(-1);
        });

    });
</script>

<!--收起或展开评论的回复内容-->
<script type="text/javascript">
    //定义一个变量，表示当前的状态（收缩、展开）
    var onOff = true;     // true表示展开
    function changestatus(obj) {
        if (onOff) {
            $("#reply" + obj).prop("style", "display:none");   //隐藏div
            $("#btn" + obj).html(">>>展开回复");
        } else {
            //说明当前状态是收缩的，需要展开
            $("#reply" + obj).prop("style", "display:bolck");      //显示div
            $("#btn" + obj).html("<<<收起回复");
        }
        onOff = !onOff; //每点击一次，改变一次展开、收缩状态
        return false;  //阻止a标签的默认事件
    }
</script>

<!--获取当前用户的登录状态-->
<script th:inline="javascript">
    var loginmark = [[${loginstatus}]];
</script>

<!--收起或展开用户的回复框-->
<script type="text/javascript">
    //定义一个变量，表示当前的状态（收缩、展开）
    var onOff = false;     // true表示展开
    function begin(obj) {
        // alert(loginmark);
        if (loginmark == "未登录") {
            $("#newrepy" + obj).prop("style", "display:none");       //隐藏回复框
            layer.msg("请先登录");
        } else {
            if (!onOff) {
                //当前状态为收起状态
                $("#newrepy" + obj).prop("style", "display:bolck");      //显示回复框
                $("#newrepy" + obj).prop("style", "width:800px");      //显示回复框
            } else {
                //当前状态为展开状态
                $("#newrepy" + obj).prop("style", "display:none");       //隐藏回复框
                //清空回复框内容
                $("#newreply" + obj).val("");
            }
            onOff = !onOff; //每点击一次，改变一次展开、收缩状态
            return false;  //阻止a标签的默认事件
        }
    }
</script>

<!--加载表单框-->
<script>
    layui.use('form', function () {
        var form = layui.form;
        //监听提交
        form.on('submit(formreply)', function (data) {
            //layer.msg(JSON.stringify(data.field));
            return true;
        });
    });
</script>
<script th:src="@{/managerstatic/plugins/jquery.min.js}"></script>
<script th:src="@{/managerstatic/plugins/layui/layui.js}"></script>
<script th:inline="javascript">
    var url=[[@{/}]]
</script>
<script type="text/javascript" th:inline="none">
    var websocket;
    // 首先判断是否 支持 WebSocket
    if('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:8080/wsMy?jspCode=AA");
    } else if('MozWebSocket' in window) {
        websocket = new MozWebSocket("ws://localhost:8080/wsMy?jspCode=AAA");
    } else {
        websocket = new SockJS("ws://localhost:8080/wsMy?jspCode=A");
    }

    // 打开连接时
    websocket.onopen = function(event) {
        console.log(" websocket.onopen  ");
    };

    // 收到消息时
    websocket.onmessage = function(event) {
        // console.log("收到一条消息"+event.data);
        // alert(event.data);
        layui.use('table', function(){
            var table = layui.table;
            // var html = '<iframe src="'+'/moviemanager/pages/userRights/user_lc.html'+'" frameborder="no" height="520px" width="100%"></iframe>';
            var html = '<iframe src="'+'/schedule/msg'+'" frameborder="no" height="520px" width="100%"></iframe>';
            layer.open({
                area: ['900px', '500px'],
                title: '热点推送',
                type: 1
                ,content:html
            });
        });
    };

    websocket.onerror = function(event) {
        console.log("  websocket.onerror  ");
    };

    websocket.onclose = function(event) {
        console.log("  websocket.onclose  ");
    };
</script>
</body>
</html>
